<template>
	<view>
		<input class="dwmc" @blur="searchFn(search,yjData)" v-model="search" placeholder="请输入单位名称,失去焦点开始搜索" placeholder-style="color:#AAAAAA" type="text" />
		<view v-for="(item,index) in searchData" :key="item" class="rcjd">
			<view>
				<view>单位名称</view>
				<view>当前计划用水</view>
				<view>当前实际用水</view>
				<view>用水占比</view>
				<view>已发送次数</view>
				<view>最近预警时间</view>
			</view>
			<view class="sxk">
				<view>{{item.qy_name}}</view>
				<view>{{item.yj_jh}}</view>
				<view>{{item.yj_sj}}</view>
				<view :style="{'color':item.yj_color}">{{item.yj_bl}}%</view>
				<view>{{item.yj_cs}}</view>
				<view>{{item.yj_cs?item.yj_time:'无'}}</view>
			</view>
			<button type="primary" :style="{'background-color':item.yj_color}" @click="fsyj(item)">发送预警</button>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue'
	import http from '../../utils/http' 
	import formatTime from '../../utils/xzatime' 
	export default {
		setup(){
			let data = reactive({
				yjData:[],
				searchData:[],
				search:'',
				searchFn:(v,dat)=>{
					data.searchData=[];
					dat.forEach(item=>{
						let name=String(item.qy_name);
						if(name.indexOf(v)!=-1){
							data.searchData.push(item);	
						}
					})
				},
				cscx(){
					http({
						url:'/yjcx'
					})
					.then((res)=>{
						res.data.data.forEach((item)=>{
							item.yj_bl=(item.yj_sj/item.yj_jh).toFixed(2)*100;
							if(item.yj_bl>100){
								item.yj_color="#D9001B"
							}else if(item.yj_bl>90){
								item.yj_color="#F59A23"
							}else if(item.yj_bl>80){
								item.yj_color="#E1E600"
							}else{
								item.yj_color="#0079FE"
							}
						})
						data.yjData=res.data.data
						data.searchData=res.data.data
					})
				},
				fsyj(tnd){
					let odate=new Date()
					http({
						url:'/xgyj',
						method:'post',
						data:{
							time:formatTime(odate),
							id:tnd.yj_id,
							cs:tnd.yj_cs+1
						}
					}).then((res)=>{
						for(let i=0;i<data.yjData.length;i++){
							if(data.yjData[i].yj_id==tnd.yj_id){
								data.yjData[i].yj_cs++
								data.yjData[i].yj_time=formatTime(odate)
								break
							}
						}
					})
				}
			})
			onMounted(()=>{
				data.cscx()
			})
			return {...toRefs(data)}
		}
	}
</script>

<style lang="scss">
	.dwmc {
		width: 700rpx;
		margin: 30rpx auto;
		padding-left: 40rpx;
		box-sizing: border-box;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #E4E4E4;
		line-height: 80rpx;
	}
.rcjd{
	    font-size: 28rpx;
	    color: #666666;
		border: 1px solid #E4E4E4;
		border-bottom: none;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 360*2rpx;
		height: 185*2rpx;
		margin: 0 auto;
		&>view:first-child{
			font-weight: 600;
			width: 78*2rpx;
		}
		&>view{
			line-height: 60rpx;
		}
		.sxk view{
			width: 159*2rpx;
		}
			
		button{
			font-size: 28rpx;
			font-weight: 600;
			padding: 0 24rpx;
			height: 36*2rpx;
			width: 82*2rpx;
			line-height: 36*2rpx;
			margin: 0;
			border: none;
		}
	}
</style>
